<template>
  <div>尉惠，距离下班还剩: {{ time }}秒</div>
  <button @click="closeComputer">点我关机</button>
</template>
<script lang="ts">
import { shutdownWindow } from "@/utils/system";
import { onMounted, reactive, defineComponent, toRefs } from "vue";
interface dataState {
  time: any;
  timer: any;
}
export default defineComponent({
  name: "helloWorld",
  setup() {
    const state = reactive<dataState>({
      time: "",
      timer: null,
    });
    const closeComputer = () => {
      shutdownWindow();
    };
    const getEndTime = () => {
      state.time = Math.ceil(
        (new Date(new Date().toLocaleDateString() + "/17:30").getTime() -
          new Date().getTime()) /
          1000
      );
      state.timer = setInterval(() => {
        state.time--;
        if (state.time > 0) {
          console.log(`距离下班还剩${state.time < 0 ? 0 : state.time}秒`);
        } else {
          clearInterval(state.timer);
          alert(`下班啦!`);
          closeComputer();
        }
      }, 1000);
    };
    onMounted(() => {
      getEndTime();
    });
    return {
      getEndTime,
      closeComputer,
      ...toRefs(state),
    };
  },
});
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
